<template>
  <div class="box">
      <!-- <div class="box-home">
          <div class="home-item">
            <img src="../assets/dizhi.png" />
            <div class="item-right">
                <span>地址: 四川绵阳涪城区万达</span>
                <div class="map">查看地图</div>
            </div>
          </div>
          <div class="home-item">
            <img src="../assets/useringo.png" alt="">
            <div class="item-right">
                <div class="phone">
                    <span class="text">电话: 0827——2228576</span>
                    <span class="text">手机: 18549357869</span>
                    <span class="text">邮箱: 75992158@qq.com</span>
                </div>
            </div>
          </div>
          <div class="home-item" style="display flex;justify-content:center">
            <div class="lioiuyan">
                <div class="left">
                    <div class="left-button">给我们留言</div>
                    <span>扫码关注我们</span>
                </div>
                <img style="height:100px;width:100px" class="right" src="../assets/qrcode.jpg" />
            </div>
          </div>
      </div>-->
      <div class="top">
          <div class="item">
              <img src="../assets/dizhi.png">
              <div class="item-box">
                <div class="text">
                  地址: 四川绵阳涪城区万达二单元11楼
                 </div>
                 <div class="button">查看地图</div>
              </div>
          </div>
          <div class="item">
            <img src="../assets/useringo.png">
            <div class="item-box" style="align-items: flex-start;">
                <div class="text1">电话: 0827-2228576</div>
                <div class="text2">(上班时间：9:00-18:00节假日除外)</div>
                <div class="text3">邮箱: 75992158@qq.com</div>
            </div>
          </div>
          <div class="item" style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
            <div class="item-box" style="margin-top:-20px">
                 <div class="button" style="margin-left:80px">给我们留言</div>
                <div class="text text6" style=";margin-left:80px">
                  扫码关注我们
                 </div>
            </div>
            <img style="width:68px;height:68px;margin-right:34px;" src="../assets/qrcode.jpg" alt="">
          </div>
      </div>
      <div class="bottom">四川万亿科技有限公司</div> 
  </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus" scoped>
.box{
    width:100%;
    height:382px;
    background:rgba(27,27,27,1);
    .top{
        width 100%
        height 304px
        display flex
        flex-direction row
        align-items center
        justify-content center
        .item{
            margin-right 64px
            width:461;
            height:138px;
            border:1px solid rgba(210,210,210,1);
            display flex
            flex-direction row
            align-items center
            img{
                margin 35px 0 35px 40px
                width:52px;
                height:68px;
            }
            .item-box{
                margin-left 16px
                display flex
                flex-direction column
                align-items center
                margin-right 30px
                .text{
                    font-size:20px;
                    font-family:SourceHanSansCN;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    text-align center
                    line-height:24px;
                    width:261px;
                    height:43px;
                }
                .button{
                    cursor pointer
                    margin-top 10px
                    width:143px;
                    height:44px;
                    background:rgba(107,107,107,1);
                    border:1px solid rgba(0,0,0,1);
                    display flex
                    justify-content center
                    align-items center
                    font-size:24px;
                    font-family:Adobe Heiti Std;
                    font-weight:normal;
                    color:rgba(255,255,255,1);
                }
                .text1{
                    width:240px;
                    font-size:20px;
                    font-family:SourceHanSansCN;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    margin-top 5px
                }
                .text2{
                    width:227px;
                    font-size:20px;
                    font-family:SourceHanSansCN;
                    font-weight:300;
                    color:rgba(255,255,255,1);
                    margin-top 5px
                }
                .text3{
                   width:269px;
                    font-size:20px;
                    font-family:SourceHanSansCN;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    margin-top 5px
                }
                .text6{
                    width:128px;
                    height:19px;
                    font-size:20px;
                    font-family:SourceHanSansCN;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    line-height:50px;
                }
            }

        }
    }
    .bottom{
        width 100%
        height 78px
        background #000000
        display flex
        align-items center
        justify-content center
        font-size:20px;
        font-family:SourceHanSansCN;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
}
// .box{
//     width 100%;
//     height 400px;
//     background #1B1B1B
//     display flex
//     flex-direction column
//     justify-content flex-end
// }
// .box-home{
//     width 70%
//     height 75%
//     margin 0 auto
//     display flex
//     flex-direction row
//     align-items center
//     justify-content space-around
//     .home-item{
//         border 1px solid #C0C0C0
//         height 150px
//         width 500px
//         display flex
//         flex-direction row
//         align-items center
//         img{
//             margin-left 30px
//             height 70px
//             width 70px
//         }
//         .item-right{
//             color #F9F9F9
//             display flex
//             flex-direction column
//             align-items center
//             margin-left 50px
//             font-size 15px
//             letter-spacing 3px
//             .map{
//                 margin-top 20px
//                 display flex
//                 justify-content center
//                 align-items center
//                 height 40px
//                 font-size 23px
//                 width 140px
//                 background #6B6B6B
//             }
//             .phone{
//                 display flex
//                 flex-direction column
//                 font-size 15px
//                 span {
//                     margin-top 10px
//                 }
//             }
//         }
//     }
// }
// .box-footer{
//     display flex
//     justify-content center
//     align-items center
//     font-size 20px
//     color #D8D8D8
//     width 100%
//     background #000000
//     height 25%
// }
// .lioiuyan{
//     color #EDEDED
//     display flex
//     font-size 15px
//     flex-direction row
//     align-items center
//     justify-content center
//     .left-button{
//         width 140px
//         height 40px
//         background #6B6B6B
//         display flex
//         justify-content center
//         align-items center
//         margin-bottom 20px
//         color #FFFFFF
//         font-size 23px
//     }
//     span{
//         letter-spacing 3px
//     }
// }
</style>